'use strict'
;(function(){
    var dom = '<div id="DETAIL">\
        <div class="detail-cont" id="detailCont">\
            <div class="content-title" >\
            </div>\
            <div class="content-detail" >\
            </div>\
        </div>\
        <div class="recommend">\
            <div class="recommend-title">\
                为您推荐\
            </div>\
            <div class="recommend-list">\
            </div>\
        </div>\
    </div>'

    var home_page = {};
    /* 模版翻页处理 */
    var pages_info = {};
    var recommend_data = {};
    var page = 0;
    var totalPage = 0;
    
    //页面初始化
    home_page.init = function() {
        //获取页面数据
        home_page.get_page_data();
    };

    /*
        页面数据
     */
    //获取详情页数据
    
    home_page.get_page_data = function(data) {
        getApi(API_URL+'meta/p4/data.json', function(data) {
            var page_data = home_page.analysis_page_data(data);
            recommend_data = home_page.analysis_recommend_data(data);
            home_page.create_detail(page_data);
            console.log(recommend_data) 
            home_page.create_recommend(recommend_data);
        })
        //处理焦点
        //add_area_btn();
        
    };
    //解析详情页数据
    home_page.analysis_page_data = function(data) {
        var page_data = data.data;
        return page_data;
    };


    // 生成详情数据
    home_page.create_detail = function(data) {
        var contentTitle='<div class="title-left"><h2>'+data.title+'</h2><span>'+getTags(data.tags)+'</span></div><div class="title-right">'
        contentTitle+='<span>'+data.person+'</span>人看过</div>';
        $('#DETAIL .content-title').html(contentTitle);
        var contentDetail = '';
        var contentDetail_l = '<div class="detail-left"><img src="'+data.img+'" alt=""></div>';
        var contentDetail_r = '<div class="detail-right">\
            <div class="detail-direct"><span class="dark1">导演</span><span class="dark2">'+data.directors+'</span></div>\
            <div class="detail-translate"><span class="dark1">翻译</span><span class="dark2">'+data.interpreter+'</span></div>\
            <div class="detail-content">\
                <span class="dark1">内容介绍</span>\
                <br>\
                <span class="dark2">'+data.long_desc+'</span>\
            </div>\
            <div class="detail-button">\
                <ul id="services">\
                </ul>\
            </div>\
            </div>';
        $('.content-detail').html(contentDetail_l+contentDetail_r);
        //遍历服务按钮
        var services_btn = data.services;
        console.log(services_btn)
        var index = 0;
        var btn_item = "";
        for(var key in services_btn){
            switch(key){
                case "play":
                    btn_item += '<li id="services-play" data-id='+data.vassetid+' data-href='+services_btn[key].route+' data-data='+services_btn[key].data+' tabindex=-1 style="width:33.333%;float:left;"><img src="http://127.0.0.1:8000/custom-templates/image/demanddetail/an1.png"/></li>';
                    break;
                case "favorite":
                    btn_item += '<li id="services-favorite" data-id='+data.vassetid+' data-href='+services_btn[key].route+' data-data='+services_btn[key].data+' tabindex=-1 style="width:33.333%;float:left;"><img src="http://127.0.0.1:8000/custom-templates/image/demanddetail/an2.png"/></li>';
                    break;
                case "back":
                    btn_item += '<li id="services-back" data-id='+data.vassetid+' data-href='+services_btn[key].route+' data-data='+services_btn[key].data+' tabindex=-1 style="width:33.333%;float:left;"><img src="http://127.0.0.1:8000/custom-templates/image/demanddetail/an3.png"/></li>';                    
                    break;
                case "buy":
                    btn_item += '<li id="services-buy" data-id='+data.vassetid+' data-href='+services_btn[key].route+' data-data='+services_btn[key].data+' tabindex=-1 style="width:33.333%;float:left;"><img src="http://127.0.0.1:8000/custom-templates/image/demanddetail/an1.png"/></li>'; 
                    break;
            }
            
            
            ++index;
        }
        /* 设置按钮css */

        $("#services").html(btn_item);

        $('#services').find('li').eq(index).attr({
            "data-id":data.vassetid,
            "data-href":services_btn[key].route,
            "data-data":services_btn[key].data,
            "tabindex":'-1'
        })
        //平均分按钮宽度
        var number = Number(100/index).toFixed(1) + "%";
        $(".detail-button ul li").css("width",number);
    };
        
    home_page.analysis_recommend_data = function(data){

        console.log(data)
        recommend_data = data.data.recommend; 
        return recommend_data;
    };
    // 生成专题推荐位数据
    home_page.create_recommend = function(special_data){
        //获取当前page
        //page = currentPage ? currentPage:0;
        
        //获取总页数
        totalPage = Math.ceil(special_data.length / 4);

        var currentSubSubject = special_data.slice(page * 4, page * 4 + 4);
        console.log(page)
        var leftSrc = page == 0?'http://127.0.0.1:8000/custom-templates/images/subject/zuojiantou_1.png':'http://127.0.0.1:8000/custom-templates/images/subject/zuojiantou.png';
        var rightSrc = page == totalPage-1?'http://127.0.0.1:8000/custom-templates/images/subject/youjiantou_1.png':'http://127.0.0.1:8000/custom-templates/images/subject/youjiantou.png';
        var str = "<div class='left_arrow'>\
                <img id='leftArrow' src='"+leftSrc+"'>\
            </div>\
            <div id='recommendList'>\
                <ul id='recommendListUl'>"+createSubjectLi(currentSubSubject)+"</ul>\
            </div>\
            <div class='right_arrow'>\
                <img id='rightArrow' src='"+rightSrc+"'>\
            </div>"
        $(".recommend-list").html(str);
    };

    function createSubjectLi(dataArray){
        var str = "";
        for(var i = 0; i < dataArray.length; i++){

            str += "<li tabindex='-1' data-id='"+dataArray[i].vassetid+"' data-href='"+dataArray[i].onclick.href+"' data-routetype='"+dataArray[i].onclick.route.tplType+"' data-routeid='"+dataArray[i].onclick.route.tplID+"'><img src='"+dataArray[i].img+"'><p class='style1-con-des'>"+dataArray[i].title+"</p></li>"
        }
        return str;
    }
    function getTags(dataTags){
        var tags = '';
        $.each(dataTags, function(ind, ele) {
            if (ind != 0) {
                tags+= '<span>'+'/'+ele+'</span>'

            } else {
                tags= '<span>'+ele+'</span>'

            }
        })
        return tags
    }

    //选择数据后填充页面
    function createDetailLi(dataArray){
        var str = "";
        for(var i = 0; i < dataArray.length; i++){
            str += "<li tabindex='-1' data-id='"+dataArray[i].vassetid+"' data-href='"+dataArray[i].onclick.href+"' data-routetype='"+dataArray[i].onclick.route.tplType+"' data-routeid='"+dataArray[i].onclick.route.tplID+"'><img src='"+dataArray[i].imgurl+"'><p class='style1-con-des'>"+dataArray[i].title+"</p></li>"
        }
        return str;
    }

    window.initDetail001 = function(){
        console.log('002')
        $("#custom-template-wrap").html(dom);
        home_page.init();  
    }
    //选择数据后填充页面
    window.fillArea = function(area, data) {
        data = JSON.parse(data);
        //获取总页数
        totalPage = Math.ceil(data.length / 4);
        var currentSubSubject = data.slice(page * 4, page * 4 + 4);
        var leftSrc = page == 0?'http://127.0.0.1:8000/custom-templates/images/subject/zuojiantou_1.png':'http://127.0.0.1:8000/custom-templates/images/subject/zuojiantou.png';
        var rightSrc = page == totalPage-1?'http://127.0.0.1:8000/custom-templates/images/subject/youjiantou_1.png':'http://127.0.0.1:8000/custom-templates/images/subject/youjiantou.png';
        var str = "<div class='left_arrow'>\
                <img id='leftArrow' src='"+leftSrc+"'>\
            </div>\
            <div id='recommendList'>\
                <ul id='recommendListUl'>"+createDetailLi(currentSubSubject)+"</ul>\
            </div>\
            <div class='right_arrow'>\
                <img id='rightArrow' src='"+rightSrc+"'>\
            </div>"
        $(".recommend-list").html(str);
    }

    /* 区别于静态页 点击左右箭头翻页*/
    $('.left_arrow').on('click',function(){
        alert('1')
        console.log('right')
        if(page == 0){

         var leftSrc = page == 0?'http://127.0.0.1:8000/custom-templates/images/subject/zuojiantou_1.png':'http://127.0.0.1:8000/custom-templates/images/subject/zuojiantou.png';
         
            return
        }else{
            page = page - 1;
            var currentSubSubject = recommend_data.slice(page * 4, page * 4 + 4);
            var str = createSubjectLi(currentSubSubject);
            $("#recommendListUl").html(str);
            setFocus("recommendListUl",3);
        }
    })
    $('.right_arrow').on('click',function(){
        console.log('right')
        if(page == totalPage-1){
            var rightSrc = page == totalPage-1?'../image/subject/youjiantou_1.png':'../image/subject/youjiantou.png';
             console.log(page+' '+totalPage)
            return
        }else{
            page = page + 1;
            var currentSubSubject = recommend_data.slice(page * 4, page * 4 + 4);
            var str = createSubjectLi(currentSubSubject);
            $("#recommendListUl").html(str);
            setFocus("recommendListUl",0);
        }
    })

})();